<template>
  <a-button type="primary" @click="addHospital" style="margin-bottom: 10px;margin-left: 5px">添加医院</a-button>
  <a-table :columns="columns" :data-source="state.hospitals" :rowKey="record=>record.id" bordered :scroll="{ y: 300 }">
    <template #action="record">
      <div>
        <a-popconfirm
            title="确认删除吗?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record.record.id)"
            @cancel="cancel"
        >
          <a-button href="#">删除</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="edit(record.record.id)" style="float: right">编辑</a-button>
      </div>
    </template>
  </a-table>

  <a-modal
      :title="Title"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk(state.hospital)"
  >
    <a-form :model="state.hospital" :label-col="{span: 3}" :wrapper-col="{ span: 16 }">
      <a-form-item label="id" v-if="state.hospital.id == null" hidden>
        <a-input v-model:value="state.hospital.id" />
      </a-form-item>
      <a-form-item label="id" v-else>
        <a-input v-model:value="state.hospital.id" disabled="true" style="width: 300px"/>
      </a-form-item>
      <a-form-item label="医院名">
        <a-input v-model:value="state.hospital.name" style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="院长id">
        <a-input v-model:value="state.hospital.leaderId" style="width: 300px;left: 2px" />
      </a-form-item>
      <a-form-item label="区域">
        <a-input v-model:value="state.hospital.areaId" hidden/>
        <a-dropdown>
          <a-button class="ant-dropdown-link" @click.prevent style="width: 300px;">
            {{ area.name }}
          </a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item v-for="item in state.areas" :key="item" style="text-align: center">
                <a href="javascript:;" @click="chooseArea(item.id, item.name)"
                >{{ item.name }}</a
                >
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {defineComponent, onBeforeMount, onMounted, reactive, ref} from "vue";
import {
  reqAddHospital,
  reqDeleteHospitalById,
  reqGetAllArea,
  reqGetAllHospital,
  reqGetAreaById,
  reqGetExpertsByAreaId,
  reqGetHospitalById,
  reqUpdateHospitalById
} from "../api/index";
import {message} from "ant-design-vue";
import router from "@/router";

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    align: 'center',
  },
  {
    title: "医院名",
    dataIndex: "name",
    key: "name",
    align: 'center',
  },
  {
    title: "院长id",
    dataIndex: "leaderId",
    key: "leaderId",
    align: 'center',
  },
  {
    title: "区域id",
    dataIndex: "areaId",
    key: "areaId",
    align: 'center',
  },
  {
    title: "操作",
    dataIndex: "",
    width: 200,
    key: "x",
    fixed: 'right',
    align: 'center',
    slots: {
      customRender: "action",
    },
  },
];
export default defineComponent({
  setup() {
    const Title = ref('')
    const state = reactive({
      hospitals: [],
      hospital: {},
      areas: [],
      type: "",
    });
    const modalText = ref("Content of the modal");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const area = reactive({
      id: '',
      name: '请选择区域',
    });
    const addHospital = async () => {
      let areaResult = await reqGetAllArea();
      state.areas = areaResult.data;
      state.type = "add";
      Title.value = "添加医院信息";
      visible.value = true;
      state.hospital = {};
      area.name = '请选择区域';
    };

    onBeforeMount(async () => {
      let roleId = sessionStorage.getItem("roleId");
      if (roleId != 1 && roleId != 2) {
        router.push('/console/noPrivilege');
      }
      let res = await reqGetAllArea();
      state.areas = res.data;
      // new Map
      console.log("key" +state.areas)
    })

    const handleOk = async (hospital) => {
      modalText.value = "please wait for sometime";
      confirmLoading.value = true;
      hospital.areaId = area.id;
      if (state.type === "update") {

        let result = await reqUpdateHospitalById(hospital);
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllHospital();
          state.hospitals = result.data;
          state.hospital = {}
          area.id = '';
          area.name = '请选择区域';
        }
      } else if (state.type === "add") {
        let result = await reqAddHospital(hospital)
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllHospital();
          state.hospitals = result.data;
          state.hospital = {};
          area.name = '请选择区域';
          area.id = '';

        }
      }
    };
    const edit = async (id) => {
      area.id = id;
      let areaName = await reqGetAreaById(id);
      area.name = areaName.data.name;

      let result = await reqGetHospitalById(id);
      let areaResult = await reqGetAllArea();
      state.areas = areaResult.data;
      state.type = "update";
      Title.value = "修改医院信息";
      state.hospital = result.data;
      visible.value = true;


    };
    const confirm = async (id) => {
      let result = await reqDeleteHospitalById(id);
      if (result.code === 200) {
        message.success("删除成功");
        let result = await reqGetAllHospital();
        state.hospitals = result.data;
      }
    };

    const cancel = (e) => {
      console.log(e);
      message.error("Click on No");
    };
    onMounted(async () => {
      let result = await reqGetAllHospital();
      console.log(result)
      state.hospitals = result.data;
    });
    const chooseArea = async (id, name) => {
      let result = await reqGetExpertsByAreaId(id);
      state.experts = result.data;
      area.id = id;
      area.name = name;
      // console.log("area: " + area.name)
    };

    return {
      Title,
      state,
      columns,
      edit,
      modalText,
      visible,
      confirmLoading,
      handleOk,
      confirm,
      cancel,
      addHospital,
      area,
      chooseArea,

    };
  },
});
</script>
